<template>
  <div>
    <!-- <el-link href="#/test">测试页面</el-link> -->
    <el-row>
      <el-container>
        <el-col :span="6">
          <el-aside width="400px">
          </el-aside>
        </el-col>
        <!-- <el-col :span="1"></el-col> -->
        <el-container>
          <el-main>
            <div id="app">
              <el-carousel :interval="5000" arrow="always">
                <el-carousel-item v-for="(img, index) in imgList" :key="index">
                  <img :src="img.url" />
                </el-carousel-item>
              </el-carousel>
            </div>

            <div style="height: 1000px">
              <div id="drawer" style="height: 80%">
                <el-drawer
                  size="22%"
                  title="我是标题"
                  :visible.sync="drawer"
                  direction="ltr"
                  :with-header="false"
                >
                  <span>我来啦!</span>
                </el-drawer>
              </div>
            </div>
          </el-main>
          <el-footer></el-footer>
        </el-container>
      </el-container>
    </el-row>
  </div>
</template>



<script>
import "element-ui/lib/theme-chalk/index.css";
import ElementUI from "element-ui";
export default {
  name: "Index",
  data() {
    return {
      imgList: [
        { url: require("../img/index-1.png") },
        { url: require("../img/index-2.png") },
        { url: require("../img/index-3.png") },
      ],
      drawer:false,
     input1: '',
      input2: '',
      input3: '',
      select: ''
    };
  },
};
</script>

// ------------内页导航-------------------


<style>
.el-header,
.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 60px;
}


.el-main {
  background-color: #d6f6fac2;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 100px;
  position: absolute;
}

.el-select .el-input {
  width: 90px;
}
.input-with-select .el-input-group__prepend {
  background-color: rgb(196, 243, 187);
}
.el-input-group {
  width: 85%;
  position: relative;
  padding-bottom: 100px;
}
.el-drawer.ltr {
  height: 650px;
  margin-top: 70px;
  margin-left: 30px;
  border-radius: 10px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>